<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"  xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<meta charset="utf-8">
<head th:include="centre/manage/include :: header"></head>

<link rel="stylesheet" type="text/css" href="/css/plugins/layui/layui.css"/>
<link href="/css/jquery-select/jquery.searchableSelect.css" rel="stylesheet" type="text/css">
<style>
    .province {
        float: left;
        position: relative;
        width: 150px;
        height: 35px;
        line-height: 35px;
        border: 1px solid #fff;
    }

    .province:hover {
        border: 1px solid #f7e4a5;
        border-bottom: 1px solid #fffec6;
        background: #fffec6;
    }

    .province .cityall {
        margin-top: 10px;
    }

    .province ul {
        list-style: outside none none;
        position: absolute;
        padding: 0;
        background: #fffec6;
        border: 1px solid #f7e4a5;
        display: none;
        width: auto;
        width: 300px;
        z-index: 999999;
        left: -26px;
        top: 33px;
    }

    .province ul li {
        float: left;
        min-width: 60px;
        margin-left: 20px;
        height: 30px;
        line-height: 30px;
    }

    .province .checkbox-inline {
        padding-top: 0;
    }

    h3, h4, h5 {
        margin: 5px 0;
        font-weight: 600;
    }

    input[type=email], input[type=url], input[type=search], input[type=tel],
    input[type=color], input[type=text], input[type=password], input[type=datetime],
    input[type=datetime-local], input[type=date], input[type=month], input[type=time],
    input[type=week], input[type=number], textarea {
        border-radius: 0 !important;
        color: #858585;
        background-color: #FFF;
        border: 1px solid #D5D5D5;
        padding: 5px 4px 6px;
        font-size: 14px;
        font-family: inherit;
        -webkit-box-shadow: none !important;
        box-shadow: none !important;
        -webkit-transition-duration: .1s;
        transition-duration: .1s;
    }

    .spectable td, .spectable th {
        border: 1px solid #ccc;
        vertical-align: middle;
        text-align: center;
    }

    .spectable th {
        font-weight: bold;
    }

    .spectableinput {
        text-align: center;
    }

    .f {
        border-color: #b94a48;
        -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
        -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
        box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    }

    .table.table-bordered tr th, .table.table-bordered tr td {
        overflow: hidden;
        text-overflow: ellipsis;
    }

    select {
        padding: 3px 4px;
        height: 30px;
    }

    /* .tags {
        display: inline-block;
        padding: 4px 6px;
        color: #777;
        vertical-align: middle;
        background-color: #FFF;
        border: 1px solid #D5D5D5;
        width: 206px;
    } */
</style>
<body class="gray-bg">
<div class="wrapper wrapper-content ">
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-content">
                    <form class="form-horizontal m-t" id="signupForm">
                        <table class="table table-bordered table-condensed">
                            <tbody>
                            <tr>
                                <th class="required" style="text-align: right;"><em class="gg-star">*</em>商户名称:</th>
                                <td><input id="name" name="name" class="form-control" type="text"/></td>

                                <th class="required" style="text-align: right;"><em class="gg-star">*</em>简称:</th>
                                <td><input id="shortName" name="shortName" class="form-control" type="text"/></td>
                            </tr>
                            <tr>
                                <th class="required" style="text-align: right;"><em class="gg-star">*</em>商户类型:</th>
                                <td>
                                    <select id="type" name="type" class="form-control" onchange="onTypeChange()">
                                        <option value="1" selected>企业</option>
                                        <option value="0">个人</option>
                                    </select>
                                </td>
                                <th class="required" style="text-align: right;">官网:</th>
                                <td><input id="network" name="network" class="form-control" type="text"></td>
                            </tr>

                            <tr>
                                <th class="required" style="text-align: right;"><em class="gg-star">*</em>一级分类:</th>
                                <td>
                                    <select id="pcate" name="pcate" class="form-control"
                                            onchange="renderCategoryThird(this)">
                                        <option value="0">请选择顶级分类</option>
                                        <option th:each="item: ${category}" th:text="${item.name}"
                                                th:value="${item.id}"></option>
                                    </select>
                                </td>
                                <th class="required" style="text-align: right;"><em class="gg-star">*</em>二级分类:</th>
                                <td>
                                    <select id="ccate" name="ccate" class="form-control">
                                        <option value="0">请选择下级分类</option>
                                    </select>
                                </td>
                            </tr>
                            <tr>
                                <th class="required" style="text-align: right;">地区</th>
                                <td colspan="3">
                                    <div class="gg-formDetail gg-font0" data-toggle="distpicker">
                                        <div class="gg-area">
                                            <select class="form-control" id="province" name="province"
                                                    data-province="----选择省----">
                                            </select>
                                        </div>
                                        <div class="gg-area">
                                            <select class="form-control" id="city" name="city" data-city="----选择市----">
                                            </select>
                                        </div>
                                        <div class="gg-area">
                                            <select class="form-control" id="area" name="area"
                                                    data-district="----选择区----">
                                            </select>
                                        </div>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <th class="required" style="text-align: right;">详细地址:</th>
                                <td colspan="3"><input id="address" name="address" class="form-control" type="text"/>
                                </td>
                            </tr>
                            <tr>
                                <th class="required" style="text-align: right;">注册地址:</th>
                                <td colspan="3"><input id="registAddress" name="registAddress" class="form-control"
                                                       type="text"/></td>
                            </tr>
                            <tr>
                                <th class="required" style="text-align: right;">开户行:</th>
                                <td><input id="depositBank" name="depositBank" class="form-control" type="text"/></td>

                                <th class="required" style="text-align: right;">开户行账号:</th>
                                <td><input id="bankNo" name="bankNo" class="form-control" type="text"></td>
                            </tr>
                            <tr>
                                <th class="required" style="text-align: right;">营业执照编号:</th>
                                <td><input id="busiLicense" name="busiLicense" class="form-control" type="text"
                                           placeholder="类型为企业时必填"/></td>

                                <th class="required" style="text-align: right;">经营类别:</th>
                                <td><input id="busiCategory" name="busiCategory" class="form-control" type="text"
                                           placeholder="类型为企业时必填"/></td>
                            </tr>

                            <tr>
                                <th class="required" style="text-align: right;">注册资金(万):</th>
                                <td><input id="registCapital" name="registCapital" min="0" class="form-control"
                                           placeholder="类型为企业时必填"/></td>
                                <th class="required" style="text-align: right;">注册日期:</th>
                                <td><input type="text" class="laydate-icon form-control" placeholder="请选择日期,类型为企业时必填"
                                           id="registDate" name="registDate"
                                           onclick="laydate({istime: false, format: 'YYYY-MM-DD'})"
                                           style="background-color: #fff;" readonly="readonly"/></td>
                            </tr>
                            <tr>
                                <th class="required" style="text-align: right;">法人姓名:</th>
                                <td><input id="legalName" name="legalName" class="form-control" type="text"/></td>

                                <th class="required" style="text-align: right;">法人身份证:</th>
                                <td><input id="legalNo" name="legalNo" class="form-control" type="text"/></td>
                            </tr>
                            <tr>
                                <th class="required" style="text-align: right;"><!-- 控制人 -->ip:</th>
                                <td><input id="controller" name="controller" class="form-control" type="text"/></td>

                                <th class="required" style="text-align: right;"><!-- 控制人身份证 -->enterpriceUrl:</th>
                                <td><input id="controllerNo" name="controllerNo" class="form-control" type="text"/></td>
                            </tr>

                            <tr>
                                <th class="required" style="text-align: right;"><!-- 账户管理人 -->公众号appid:</th>
                                <td><input id="gzhAppid" name="gzhAppid" class="form-control" type="text"/>
                                </td>

                                <th class="required" style="text-align: right;"><!-- 账户管理办公电话 -->公众号secret:</th>
                                <td><input id="gzhSecret" name="gzhSecret" class="form-control" type="text"/></td>
                            </tr>

                            <tr>
                                <th class="required" style="text-align: right;"><em class="gg-star">*</em>账户管理手机:</th>
                                <td><input id="accountMobile" name="accountMobile" class="form-control" type="text"/>
                                </td>

                                <th class="required" style="text-align: right;"><!-- 账户管理邮箱 -->components:</th>
                                <td><input id="accountEmail" name="accountEmail" class="form-control" type="text"/></td>
                            </tr>

                            <tr>
                                <th class="required" style="text-align: right;"><!-- 业务联系人 -->微信支付商户号(mchId):</th>
                                <td><input id="relateBusi" name="relateBusi" class="form-control" type="text"/></td>

                                <th class="required" style="text-align: right;"><!-- 业务联系办公电话 -->certificateKey:</th>
                                <td><input id="busiTel" name="busiTel" class="form-control" type="text"/></td>
                            </tr>

                            <tr>
                                <th class="required" style="text-align: right;"><!-- 业务联系手机 -->certificateFile:</th>
                                <td><input id="busiMobile" name="busiMobile" class="form-control" type="text"/></td>

                                <th class="required" style="text-align: right;"><!-- 业务联系邮箱 -->paySignKey:</th>
                                <td><input id="busiEmail" name="busiEmail" class="form-control" type="text"/></td>
                            </tr>
                            <tr>
                                <th class="required" style="text-align: right;">打款期限（天）:</th>
                                <td><input id="paymentdays" name="paymentdays" class="form-control" type="text"
                                           value="1"/></td>
                            </tr>
                            <tr>
                                <th style="text-align: right;">备注:</th>
                                <td colspan="3">
                                    <textarea id="desc" name="desc" class="form-control"></textarea>
                                </td>
                            </tr>
                            <tr>
                                <th style="text-align: right;">商品审核:</th>
                                <td colspan="3">
                                    <div class="col-sm-8">
                                        <label class="radio-inline">
                                            <input type="radio" name="verify" value="1"/>审核
                                        </label>
                                        <label class="radio-inline">
                                            <input type="radio" name="verify" value="0"/>不审核
                                        </label>
                                    </div>
                                </td>
                            </tr>

                            <tr>
                                <th style="text-align: right;">售卖区域:</th>
                                <td colspan="3">
                                    <div class="col-sm-9 col-xs-12">
                                        <div id="areas" class="form-control-static">长沙市;株洲市;湘潭市;</div>
                                        <a href="javascript:;" class="btn btn-default"
                                           onclick="selectAreas()">选择地区</a>
                                        <input type="hidden" id="selectedareas" name="areas" value="长沙市;株洲市;湘潭市;"/>
                                    </div>

                                    <div id="modal-areas" class="modal fade" tabindex="-1" data-toggle="modal-areas">
                                        <div class="modal-dialog" style='width: 920px;'>
                                            <div class="modal-content">
                                                <div class="modal-header">
                                                    <button aria-hidden="true" data-dismiss="modal" class="close"
                                                            type="button">×
                                                    </button>
                                                    <h3>选择区域</h3>
                                                </div>
                                                <div class="modal-body" id="areas-modal-body" style='height: 280px;'>
                                                    <div class='province'>
                                                        <label class='checkbox-inline' style='margin-left: 20px;'>
                                                            <input type='checkbox' class='cityall'
                                                                   style='margin-top: 12px;'/>
                                                            <span class="citycount" style='color: #ff6600'></span>
                                                        </label>
                                                    </div>
                                                </div>
                                                <div class="modal-footer">
                                                    <a id='btnSubmitArea' class="btn btn-success" data-dismiss="modal"
                                                       aria-hidden="true">确定</a>
                                                    <a class="btn btn-default" data-dismiss="modal"
                                                       aria-hidden="true">关闭</a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                </td>
                            </tr>

                            <tr>
                                <th style="text-align: right;">营业执照:</th>
                                <td><input id="busiLicenseImg" name="busiLicenseImg" class="form-control" type="text">
                                </td>
                                <th><button type="button"  onclick="onSelectImgBtnClick('busiLicenseImg','busiLicenseImgPre')"
                                            class="btn btn-primary"><i class="fa fa-check"></i>选择图片</button></th>
                                <td><img src="" id="busiLicenseImgPre" style="max-width: 30%"/></td>
                            </tr>
                            <tr>
                                <th style="text-align: right;">手持身份证照片:</th>
                                <td><input id="handIdPhoto" name="handIdPhoto" class="form-control" type="text">
                                </td>
                                <th><button type="button"  onclick="onSelectImgBtnClick('handIdPhoto','handIdPhotoPre')"
                                            class="btn btn-primary"><i class="fa fa-check"></i>选择图片</button></th>
                                <td><img src="" id="handIdPhotoPre" style="max-width: 30%"/></td>
                            </tr>
                            <tr>
                                <th style="text-align: right;">其他证件:</th>
                                <td><input id="otherLicenseImg" name="otherLicenseImg" class="form-control" type="text">
                                </td>
                                <th><button type="button"  onclick="onSelectImgBtnClick('otherLicenseImg','otherLicenseImgPre')"
                                            class="btn btn-primary"><i class="fa fa-check"></i>选择图片</button></th>
                                <td><img src="" id="otherLicenseImgPre" style="max-width: 30%"/></td>
                            </tr>
                            <tr>
                                <th style="text-align: right;">店招图片:</th>
                                <td><input id="signageImg" name="signageImg" class="form-control" type="text">
                                </td>
                                <th><button type="button"  onclick="onSelectImgBtnClick('signageImg','signageImgPre')"
                                            class="btn btn-primary"><i class="fa fa-check"></i>选择图片</button></th>
                                <td><img src="" id="signageImgPre" style="max-width: 30%"/></td>
                            </tr>
                            <tr>
                                <th style="text-align: right;">LOGO:</th>
                                <td><input id="logo" name="logo" class="form-control" type="text">
                                </td>
                                <th><button type="button"  onclick="onSelectImgBtnClick('logo','logoPre')"
                                            class="btn btn-primary"><i class="fa fa-check"></i>选择图片</button></th>
                                <td><img src="" id="logoPre" style="max-width: 30%"/></td>
                            </tr>
                            <tr>
                                <th style="text-align: right;">二维码:</th>
                                <td><input id="qrCode" name="qrCode" class="form-control" type="text">
                                </td>
                                <th><button type="button"  onclick="onSelectImgBtnClick('qrCode','qrCodePre')"
                                            class="btn btn-primary"><i class="fa fa-check"></i>选择图片</button></th>
                                <td><img src="" id="qrCodePre" style="max-width: 30%"/></td>
                            </tr>
                            <tr>
                                <th class="required" style="text-align: right;">上班时间(09:00):</th>
                                <td><input id="workStart" name="workStart" class="form-control" type="text"/></td>

                                <th class="required" style="text-align: right;">下班时间(22:00):</th>
                                <td><input id="workEnd" name="workEnd" class="form-control" type="text"/></td>
                            </tr>
                            <tr>
                                <th style="text-align: right;">虚拟商家:</th>
                                <td colspan="3">
                                    <div class="col-sm-8">
                                        <label class="radio-inline">
                                            <input type="radio" name="isVirtual" value="1"/>是
                                        </label>
                                        <label class="radio-inline">
                                            <input type="radio" name="isVirtual" value="0"/>否
                                        </label>
                                    </div>
                                </td>
                            </tr>
                            
                              <!--<tr>-->
                                <!--<th class="required" style="text-align: right;"><em class="gg-star">*</em>绑定会员,绑定后不能修改:</th>-->
                                <!--<td>-->
                                    <!--<input id="mid" name="mid" class="form-control" type="hidden">-->
									<!--<input id="username" name="username" placeholder="点击绑定会员"-->
										<!--class="form-control" type="text" readonly-->
										<!--onclick="relateMember()">-->
                                <!--</td>-->
                            <!--</tr>-->
                            <!---->
                             <!--<tr>-->
                                <!--<th class="required" style="text-align: right;"><em class="gg-star">*</em>绑定推荐人,绑定后不能修改:</th>-->
                                <!--<td>-->
                                  <!--<input id="referrals" name="referrals" class="form-control"type="hidden">-->
                                    <!--<input id="buyrealnm" name="buyrealnm"-->
										<!--placeholder="点击关推荐人" class="form-control" type="text" readonly-->
										<!--onclick="relateMember1()">-->
                                <!--</td>-->
                            <!--</tr>-->
                            
                              <tr>
                                <th class="required" style="text-align: right;"><em class="gg-star">*</em>版本:</th>
                                <td>
                                    <select id="projectexpId" name="projectexpId" class="form-control">
                                        <option value="">--请选择版本--</option>
                                        <option th:each="item:${projectexp}" th:text="${item.name}"  th:value="${item.id}"></option>
                                    </select>
                                </td>
                                  <th class="required" style="text-align: right;"><em class="gg-star">*</em>有效期:</th>
                                  <td><input type="text" class="laydate-icon form-control" placeholder="请选择日期"
                                             id="expiredDate" name="expiredDate"
                                             onclick="laydate({istime: false, format: 'YYYY-MM-DD'})"
                                             style="background-color: #fff;" readonly="readonly"/></td>
                            </tr>
                            <tr th:if="${centreName} == 'admin'">
                                <th class="required" style="text-align: right;">线上扣点比例(百分比):</th>
                                <td><input id="deductionRatio" name="deductionRatio" class="form-control" type="number"/></td>

                                <th class="required" style="text-align: right;">线下扣点比例(百分比):</th>
                                <td><input id="offlineDeductionRatio" name="offlineDeductionRatio" class="form-control" type="number"/></td>
                            </tr>
                            <tr th:if="${centreName} == 'admin'">
                                <th class="required" style="text-align: right;">线上扣点比例(百分比):</th>
                                <td><input id="yplServiceRate" name="yplServiceRate" class="form-control" type="number"/></td>

                                <th class="required" style="text-align: right;"></th>
                                <td></td>
                            </tr>
                            
                            </tbody>
                        </table>
                        <div class="form-group text-center">
                            <div class="col-sm-8 col-sm-offset-2">
                                <button type="submit" class="btn btn-primary"><i class="fa fa-check"></i>提交</button>
                                <div class="btn btn-danger" onclick="closeDow()"><i class="fa fa-remove"></i> 关闭</div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

</div>
<div th:include="centre/manage/include::footer"></div>
<script type="text/javascript" src="/js/appjs/product/AreaData.js"></script>
<script type="text/javascript" src="/js/appjs/centre/manage/add.js"></script>
<script type="text/javascript">
    $(function () {
        //从js数据中获取地区
        var areasModalBody = '';
        for (var i = 0; i < provs_data.length; i++) {
            console.log(provs_data[i]);
            areasModalBody += "<div class='province'>";
            areasModalBody += "<label class='checkbox-inline' style='margin-left:20px;'>";
            areasModalBody += "<input type='checkbox' class='cityall' style='margin-top:12px;' />";
            areasModalBody += provs_data[i].text;
            areasModalBody += "<span class='citycount' style='color:#ff6600'></span>";
            areasModalBody += "</label>";

            //获取省级下的所有市
            if (citys_data[provs_data[i].value].length > 0) {
                areasModalBody += "<ul>";
                var citys = citys_data[provs_data[i].value];
                for (var j = 0; j < citys.length; j++) {
                    //	alert(JSON.stringify(dists_data[citys[j].value]));

                    areasModalBody += "<li>";
                    areasModalBody += "<label class='checkbox-inline' >";
                    areasModalBody += "<input type='checkbox' class='city' style='margin-top:8px;' city=" + citys[j].text + " />";
                    areasModalBody += citys[j].text;
                    areasModalBody += "</label>";
                    areasModalBody += "</li>";
                }
                areasModalBody += "</ul>";
            }

            areasModalBody += "</div>";
        }
        $("#areas-modal-body").html(areasModalBody);

        $('.province').mouseover(function () {
            $(this).find('ul').show();
        }).mouseout(function () {
            $(this).find('ul').hide();
        });


        $('.cityall').click(function () {
            var checked = $(this).get(0).checked;
            var citys = $(this).parent().parent().find('.city');
            citys.each(function () {
                $(this).get(0).checked = checked;
            });
            var count = 0;
            if (checked) {
                count = $(this).parent().parent().find('.city:checked').length;
            }
            if (count > 0) {
                $(this).next().html("(" + count + ")");
            }
            else {
                $(this).next().html("");
            }
        });
        $('.city').click(function () {
            var checked = $(this).get(0).checked;
            var cityall = $(this).parent().parent().parent().parent().find('.cityall');

            if (checked) {
                cityall.get(0).checked = true;
            }
            var count = cityall.parent().parent().find('.city:checked').length;
            if (count > 0) {
                cityall.next().html("(" + count + ")");
            }
            else {
                cityall.next().html("");
            }
        });

        $('#btnSubmitArea').unbind('click').click(function () {
            $('.city:checked').each(function () {
                citystrs += $(this).attr('city') + ";";
            });
            $('.' + current + ' .cityshtml').html(citystrs);
            $('.' + current + ' .citys').val(citystrs);
        })


    });

    function closeDow() {
        var index = parent.layer.getFrameIndex(window.name); // 获取窗口索引
        parent.layer.close(index);
    }

    function clearSelects() {
        $('.city').attr('checked', false).removeAttr('disabled');
        $('.cityall').attr('checked', false).removeAttr('disabled');
        $('.citycount').html('');
    }

    function selectAreas() {
        clearSelects();
        var old_citys = $('#areas').html().split(';');
        $('.city').each(function () {
            var parentcheck = false;
            for (var i in old_citys) {
                if (old_citys[i] == $(this).attr('city')) {
                    parentcheck = true;
                    $(this).get(0).checked = true;
                    break;
                }
            }
            if (parentcheck) {
                $(this).parent().parent().parent().parent().find('.cityall').get(0).checked = true;
            }
        });

        $("#modal-areas").modal();
        var citystrs = '';
        $('#btnSubmitArea').unbind('click').click(function () {
            $('.city:checked').each(function () {
                citystrs += $(this).attr('city') + ";";
            });
            $('#areas').html(citystrs);
            $("#selectedareas").val(citystrs);
        })
    }

    function renderCategoryThird(obj) {
        var index = obj.options[obj.selectedIndex].value;
        var html = "<option value='0'>请选择下级分类</option>";
        if (index == 0) {
            $("#ccate").html(html);
        } else {
            $.ajax({
                url: "/centre/category/getChildByPar",
                data: {"id": index},
                dataType: "json",
                success: function (data) {
                    for (var i = 0; i < data.length; i++) {
                        html += '<option value="' + data[i].id + '">' + data[i].name + '</option>';
                    }
                    $("#ccate").html(html);
                }
            })
        }
    }

    function onSelectImgBtnClick(inputId, imgId) {
        layer.open({
            id:'selectImg',
            type : 2,
            title : '选择图片',
            maxmin : true,
            shadeClose : false,
            area : [ '60%', '70%' ],
            content : '/platform/config/selectImg/' + inputId +"/"+ imgId // iframe的url
        });
    }

    /**
     * 关联会员
     */
    function relateMember() {
    	// var centreId = $("*[name='centreId']").val();
    	layer.open({
    		id : "relation_member",
    		type : 2,
    		title : "关联会员",
    		maxmin : true,
    		shadeClose : true,
    		area : [ '70%', '80%' ],
    		content : "/mall/supply/relateMember?type=yh"
    	// content: "/mall/supply/relateMember?centreId=" + centreId
    	})
    }


    /**
     * 关联推荐人
     */
    function relateMember1() {
    	// var centreId = $("*[name='centreId']").val();
    	layer.open({
    		id : "relation_member",
    		type : 2,
    		title : "绑定推荐人",
    		maxmin : true,
    		shadeClose : true,
    		area : [ '70%', '80%' ],
    		content : "/mall/supply/relateMember?type=tjr"
    	})

    }
    
    /**
     * 设置会员信息
     * 
     * @param memberId
     * @param memberName
     */
    function loadMemberInfo(memberId, memberName) {
    	$('#mid').val(memberId)
    	$('#username').val(memberName)
    }
    /**
     * 设置推荐人信息
     * 
     * @param memberId
     * @param memberName
     */
    function loadMemberInfo1(memberId, memberName) {
    	$('#referrals').val(memberId)
    	$('#buyrealnm').val(memberName)
    }
    
    /**
     * 加载图片URL
     * @param inputId
     * @param imgId
     * @param url
     */
    function loadImgUrl(inputId, imgId, url) {
        $('#'+inputId +'').val(url);
        $('#'+imgId +'').attr('src', url);
    }
</script>
</body>
</html>
